<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>权限设置</span>
        </div>
        <el-steps :active="active" finish-status="success" align-center>
            <el-step title="路由权限"></el-step>
            <el-step title="菜单、操作权限"></el-step>
        </el-steps>
        <!-- 一定要用v-show！ -->
        <div class="route-box" v-show="active === 0">
            <div class="tree-route">
                <el-tree :data="route_list" show-checkbox default-expand-all node-key="permission_id" ref="route_tree"
                    highlight-current :props="defaultProps" :check-strictly="check_strictly_route"
                    :render-content="route_tips">
                </el-tree>
            </div>
            <el-button type="primary" @click="handleNext" class="btn-next">下一步</el-button>
            <router-link :to="{ name: 'AuthRole' }">
                <el-button>取消</el-button>
            </router-link>
        </div>
        <div class="menu-box" v-show="active === 1">
            <div class="tree-menu">
                <el-tree :data="menu_list" show-checkbox default-expand-all node-key="permission_id" ref="menu_tree"
                    highlight-current :check-strictly="check_strictly_menu" :render-content="tree_icon" :props="menuProps">
                </el-tree>
            </div>
            <el-button @click="active = 0">上一步</el-button>
            <el-button type="success" @click="handleSetUp">保存设置</el-button>
        </div>
    </el-card>
</template>

<script>
import { mapGetters, mapActions, mapState } from 'vuex';

export default {
    name: 'Setting',
    computed: {
        ...mapGetters('route', ['route_list']),
        ...mapGetters('menu', ['menu_list']),
        ...mapState('route', ['route_power_list']),
        ...mapState('menu', ['menu_power_list']),
    },
    mounted() {
        this.route_permission().then(() => {
            // this.$refs.route_tree.setCheckedKeys(this.route_power_list);
        });
        this.menu_permission().then(() => {
            // this.$refs.menu_tree.setCheckedKeys(this.menu_power_list);
        });
    },
    data() {
        return {
            active: 0,
            defaultProps: {
                children: 'children',
                label: 'permission_remark',
            },
            menuProps: {
                children: 'children',
                label: node => {
                    // 根据节点的 resource_type_id 属性来决定 label 值
                    if (node.resource_type_id === 2) {
                        return node.menu_name;
                    } else if (node.resource_type_id === 3) {
                        return node.operation_name;
                    } else {
                        return 'undefined';
                    }
                },
                disabled: false,
            },
            check_strictly_route: true,
            check_strictly_menu: true,
        };
    },
    methods: {
        ...mapActions('route', ['route_power']),
        ...mapActions('menu', ['menu_power']),

        async route_permission() {
            let { role_id } = this.$route.params;
            // 路由权限
            let { status, selectedNodes } = await this.route_power(role_id);
            if (status) {
                this.$refs.route_tree.setCheckedKeys(selectedNodes);
                this.check_strictly_route = false;
            }
        },
        async menu_permission() {
            let { role_id } = this.$route.params;
            // 菜单权限
            let { status: menu_status, selectedMenu } = await this.menu_power(role_id);
            if (menu_status) {
                this.$refs.menu_tree.setCheckedKeys(selectedMenu);
                this.check_strictly_menu = false;
            }
        },

        // 菜单图标
        tree_icon(h, { node, data, store }) {
            if (node.data.resource_type_id === 3) {
                return (
                    <span class="custom-tree-node">
                        <i class="el-icon-s-operation" style="color:orange"></i>
                        <span>{node.label}</span>
                    </span>);
            } else if (node.data.resource_type_id === 2) {
                return (
                    <span class="custom-tree-node">
                        <i class="el-icon-notebook-2" style="color:#67c23a"></i>
                        <span>{node.label}</span>
                    </span>);
            }
        },

        // 路由提示
        route_tips(h, { node, data, store }) {
            return (
                <span class="custom-tree-node">
                    <el-tooltip class="item" effect="dark" content={node.data.route_name} placement="right">
                        <span>{node.label}</span>
                    </el-tooltip>
                </span >);
        },

        // 下一步
        handleNext() {
            this.active = 1;
            // 获取选中的路由
            let route_power_list = this.$refs.route_tree.getCheckedKeys();
            let half_route_list = this.$refs.route_tree.getHalfCheckedKeys();
            half_route_list.forEach(function (item) {
                route_power_list.push(item);
            });
            console.log(route_power_list);
            let arr = [];
            this.menuProps.disabled = (data, node) => {
                if (route_power_list.includes(data.route_id)) {
                    if (arr.indexOf(data.permission_id) === -1) {
                        arr.push(data.permission_id);
                    }
                } else if (data.resource_type_id === 3 && arr.includes(data.parent_id)) {
                    return false;
                } else {
                    return true;
                }
            }
            // 未选中的节点禁用、取消选中
            let menuTree = this.$refs.menu_tree;
            let checkNode = (node) => {
                if (node.disabled) {
                    menuTree.setChecked(node.data.permission_id, false);
                }
                // 遍历子节点
                if (node.childNodes && node.childNodes.length > 0) {
                    node.childNodes.forEach((child) => {
                        checkNode(child);
                    });
                }
            };
            // 根节点menuTree.root
            checkNode(menuTree.root);
        },

        // 设置路由、菜单和操作
        ...mapActions('route', ['set_route_power']),
        ...mapActions('menu', ['set_menu_power']),
        async handleSetUp() {
            let route_power_list = this.$refs.route_tree.getCheckedKeys();
            let half_route_list = this.$refs.route_tree.getHalfCheckedKeys();
            // 可用拓展运算符：[...route_power_list,...half_route_list]
            half_route_list.forEach(function (item) {
                route_power_list.push(item);
            });
            let menu_power_list = this.$refs.menu_tree.getCheckedKeys();
            let half_menu_list = this.$refs.menu_tree.getHalfCheckedKeys();
            half_menu_list.forEach(function (item) {
                menu_power_list.push(item);
            });
            let { role_id } = this.$route.params;
            // 路由
            let { status, msg } = await this.set_route_power({ role_id, permissions: route_power_list });
            if (status) {
                this.$message.success(msg);
            } else {
                this.$message.error(msg);
            }
            // 菜单
            let { status: menu_status, msg: menu_msg } = await this.set_menu_power({ role_id, permissions: menu_power_list });
            if (menu_status) {
                this.$message.success(menu_msg);
                this.$router.push('/system/role');
            } else {
                this.$message.error(menu_msg);
            }
        },
    },
}
</script>

<style>
.tree-route {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid rgb(148, 148, 240);
}

.btn-next {
    margin-right: 10px;
}

.tree-menu {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid rgb(132, 237, 128);
}
</style>